import React, { Component } from 'react';
import { View } from 'remax/wechat';
import './projectList.less';
import { FixedSizeList } from "remax-virtual-list";
import ProjectItem from './projectItem';

class ProjectList extends Component {
  render() {
    let datas = [];
    for (let i = 1; i <= 50; i++) {
      datas.push({
        id: i,
        name: `Aaron${i}`,
      });
    }
    // let projectItems = datas.map(item => {
    //   return <ProjectItem key={item.id} project={item}></ProjectItem>
    // })

    // const rowRenderer = ({index, style}) => {
    //   return (
    //     <ProjectItem project={datas[index]} style={style}></ProjectItem>
    //   )
    // }

    const Row = ({ index, style }) => (
      <div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
        Row {index}
      </div>
    );

    return (
      <View className="project-list">
        {/* <View className="list-wrapper">
          {projectItems}
        </View> */}
        {/* <FixedSizeList 
          width={300}
          height={500} 
          itemCount={datas.length} 
          itemSize={100} 
        >
          {rowRenderer}
        </FixedSizeList> */}
        <FixedSizeList
          className="List"
          height={750}
          itemCount={1000}
          itemSize={35}
          width={750}
        >
          {Row}
        </FixedSizeList>
      </View>
    )
  }
}

export default ProjectList;